<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>商品页</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .layui-table tr{
            height: 50px;
        }
        .layui-table-cell{
            height: 50px;
        }
    </style>
</head>
<body>
<!--  头部按钮工具栏  -->
<script id="toptools" type="text/html">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" name="text" placeholder="请输入查询内容" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-event="check">查询</button>
<!--            <button type="button" class="layui-btn" lay-event="add">新增</button>-->
        </div>
    </div>
</script>
    <table class="layui-table" lay-data="{url:'/order/getallorder', page:true, id:'datalist',toolbar:'#toptools'}" lay-filter="datalist">
      <thead>
      <tr>
        <th lay-data="{field:'id', width:80, sort: true}">ID</th>
        <th lay-data="{field:'code', width:120}">订单号</th>
        <th lay-data="{field:'userId', width:120, sort: true}">用户ID</th>
        <th lay-data="{field:'money',sort:true}">价格</th>
        <th lay-data="{field:'addtime',width:600}">创建时间</th>
        <th lay-data="{field:'paymenttime',width:600}">支付时间</th>
        <th lay-data="{field:'state', width:80,sort: true}">状态</th>
        <th lay-data="{toolbar:'#linetools'}">操作</th>
      </tr>
      </thead>
    </table>
<div class="layui-btn-container" style="padding-left: 30px ">
    <a href="/page/category"><button type="button" class="layui-btn" name="category">分类管理</button></a>
    <a href="/page/product"><button type="button" class="layui-btn" name="order">商品管理</button></a>
</div>
    <script src="layui/layui.all.js"></script>
    <!--  编辑数据表单  -->
    <div style="display: none" id="editWin" lay-filter="editWin" class="layui-form">
        <!--  隐藏输入id,否则后台没有id值无法处理   -->
        <input name="code" type="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">订单状态</label>
            <div class="layui-input-inline">
                <select id="state" name="state" lay-filter="state">
                    <option value='2'>已发货</option>
                    <option value='3'>已揽件</option>
                    <option value='4'>运输中</option>
                    <option value='5'>派送中</option>
                    <option value='6'>已收货</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button type="button" lay-submit lay-filter="editsave" class="layui-btn">保存</button>
            <button type="button" class="layui-btn" id="editcancel">取消</button>
        </div>
    </div>


    <!--  行内按钮工具栏 -->
    <script id="linetools" type="text/html">
        <button type="button" class="layui-btn" lay-event="edit">编辑状态</button>
    </script>
    <script>
        const $=layui.$;
        const table=layui.table;
        const layer=layui.layer;
        const form=layui.form;


        //头部按钮监听事件
        table.on("toolbar(datalist)",function(obj){
            let event=obj.event;
            if(event=='add'){
                layer.open({
                    type:1,
                    title:'新增货品',
                    area:['600px','600px'],
                    content:$("#addWin")
                })
            }else if(event=='check'){
                let text=$("[name='text']").val();
                table.reload("datalist",{where:{'text':text},page:{curr:1}});
            }
        });
        //编辑和删除按钮监听事件
        table.on("tool(datalist)",function(obj){
            let event=obj.event;
            let data=obj.data;
                form.val("editWin",data);
                layer.open({
                    type:1,
                    title:'编辑订单状态',
                    area:['350px','250px'],
                    content:$("#editWin")
                })
        })

        //编辑表单中的保存按钮监听事件
        form.on("submit(editsave)",function(data){
          $.ajax({
              url:'order/editstate',
              data:{code:data.field.code,state:data.field.state},
              success:function(){
                  console.log("编辑表内的数据"+data.field);
                  layer.closeAll();
                  layer.msg("修改成功",{icon:1,time:1800});
                  table.reload("datalist");
              }
          });
          return false;
        })

        // //新增表单中的按钮监听事件
        // form.on("submit(addsave)",function(data){
        //     $.ajax({
        //         url:'product/add',
        //         data:data.field,
        //         success:function(){
        //             layer.closeAll();
        //             layer.msg("添加成功",{icon:1,time:1800});
        //             table.reload("datalist");
        //             form.val("addsave", {});
        //         }
        //     })
        //     return false;
        // })
        // //图片上传
        // const upload=layui.upload;
        // upload.render({
        //     elem:"[_id='addupload']",
        //     url:"file/upload",
        //     done:function(result){
        //         let url=result.data;
        //         $("[_id='addupload']").attr("src",url);
        //         $("[_id='addimgurl']").val(url);
        //     },
        //     error:function(){
        //         layer.msg("上传失败",{icon:2})
        //     }
        // });
    </script>
</body>
</html>